import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import _ from 'lodash';
import Former, { validate } from '../../../components/Former';
import Button from '../../../components/Button';
import SendBtn from './sendBtn';
import { mobileRule } from '../../../utils/rules';

export default class CheckMob extends Component {
  _validate = () => {
    validate((err, val) => {
      if (!err && _.isFunction(this.props.onSubmit)) {
        this.props.onSubmit(val);
      }
    });
  };
  render() {
    const fields = [
      {
        type: 'TextInput',
        label: '手机号',
        key: 'mobile',
        placeholder: '请输入手机号',
        extra: ({ value }) => {
          return (
            <SendBtn
              sendAction={() => {
                if (mobileRule(value)) {
                  this.props.sendAction(value, this.props.action);
                }
              }}
              disabled={!mobileRule(value)}
              sendError={this.props.sendError}
              style={{ width: 64 }}
            />
          );
        },
        rules: [
          {
            validation: (value, cb) => {
              if (mobileRule(value)) {
                cb();
              } else {
                cb('手机号格式不正确');
              }
            }
          }
        ]
      },
      {
        type: 'TextInput',
        label: '验证码',
        key: 'code',
        placeholder: '请输入短信验证码',
        rules: [
          {
            require: true,
            message: '请输入短信验证码'
          }
        ]
      }
    ];

    try {
      return (
        <ScrollView style={{ padding: 10 }}>
          <Former fields={fields} customBtn />
          <Button
            onPress={this._validate}
            type="primary"
            title={this.props.submitText}
          />
        </ScrollView>
      );
    } catch (e) {
      global.bugsnag.notify(e, (report) => {
        report.metadata = {
          "module": {
            "name": "login",
          }
        }
      })
    }
  }
}
